<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>snabbdom-demo</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
    }

    .main-block {
      background: #1F1E1A;
      width: 100%;
      height: 100%;
      padding: 50px 120px;
      box-sizing: border-box;
    }

    .btn-control {
      display: flex;
      align-items: center;
      font-size: 23px;
      width: 100%;
      height: 50px;
      margin: 10px 0 30px 0;
    }

    .btn-bg {
      background: #1E1C19;
      font-size: 23px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
      color: #84909A;
      height: 100%;
    }

    .light-hover {
      cursor: pointer;
    }

    .light-hover:hover {
      color: #FFFEDE;
    }
  </style>
</head>

<body>
  <div class="main-block">
    <h1 style="color: #FFFEDE;">Top 10 movies</h1>
    <div class="btn-control">
      <div class="btn-text" style="color: #FFFEDE;margin-right: 20px">Sort by：</div>
      <div class="btn-bg" style="width: 300px;height: 100%;">
        <div class="light-hover" id="sort-rank">Rank</div>
        <div class="light-hover" id="title-rank">Title</div>
        <div class="light-hover" id="des-rank">Description</div>
      </div>
      <div class="btn-bg" id="add-button" style="margin-left: auto; margin-right: 0">
        <div class="light-hover">Add</div>
      </div>
    </div>
    <div id="movie-list"></div>
  </div>
  <script src="./src/homework-movieList.js"></script>
</body>

</html>